import { Form, Row, Col, Input, Select, Button, Space } from 'antd';
import qs from 'qs';
import { useEffect, useState } from 'react';
interface ServicerNamesProps {
  code: string;
  name: string;
}
export const SearcherForm = ({ searchBtnF }: any) => {
  const [form] = Form.useForm();
  const { Option } = Select;
  const [resetButtonDisabled, setResetButtonDisabled] = useState<boolean>(true);
  const [filter1Require, setFilter1Require] = useState<boolean>(true);
  const [aa, setaa] = useState<any>(1);
  const [aaa, setaaa] = useState<any>(1);
  const onReset = () => {
    form.resetFields();
    setResetButtonDisabled(true);
  };
  const onFinish = async (values: any) => {
    searchBtnF(values);
  };
  const onValuesChange = () => {
    setResetButtonDisabled(!qs.stringify(form.getFieldsValue()));
  };
  const filter3Change = (values: any) => {
    console.log(values);
    if (values) {
      setFilter1Require(false);
    } else {
      setFilter1Require(true);
    }
  };
  return (
    <Form
      className="anTopSearchForm fff pad20"
      form={form}
      layout="inline"
      name="maitainSearcher"
      onFinish={onFinish}
      onValuesChange={onValuesChange}
    >
      <Form.Item
        label="筛选1"
        name="筛选1"
        rules={[
          {
            required: filter1Require,
            message: '未选中筛选条件3则必须填写筛选1',
          },
        ]}
      >
        <Input style={{ width: 230 }} placeholder="请输入" />
      </Form.Item>
      <Form.Item label="筛选2" name="筛选2">
        <Input style={{ width: 230 }} placeholder="请输入" />
      </Form.Item>

      <Form.Item label="筛选3" name="筛选3">
        <Select allowClear style={{ width: 230 }} placeholder="请选择" onChange={filter3Change}>
          <Option value="0">未支付</Option>
          <Option value="1">已支付</Option>
        </Select>
      </Form.Item>
      <Form.Item label="筛选4" name="筛选4">
        <Select style={{ width: 230 }} placeholder="请选择">
          <Option value="">全部</Option>
          <Option value="0">未支付</Option>
          <Option value="1">已支付</Option>
        </Select>
      </Form.Item>
      <div className="searchBtnBox">
        <div>
          <Button className="marg020" disabled={resetButtonDisabled} onClick={onReset}>
            重置
          </Button>
          <Button type={'primary'} htmlType="submit">
            搜索
          </Button>
        </div>
      </div>
    </Form>
  );
};
